<template>
	<view class="website-message">
        <view class="tabs-view">
            <u-tabs :list="tabsList" :is-scroll="false" :current="current" @change="changeTabs" active-color="#ff5000" bar-width="80"></u-tabs>
        </view>
        <view class="message-container">
            <mescroll-body ref="mescrollRef" top="80" :down="down" @down="downCallback" @up="upCallback">
                <uni-swipe-action class="message-list">
            	    <view class="message-item" v-for="(message, index) in messageList" :key="index">
            	        <view class="msg-date">
            	            {{ message.send_time | unixToDate }}
            	        </view>
            	        <view class="msg-content">
                            <uni-swipe-action-item :right-options="options" @click="handleMessage(index)">
                                <view class="msg-title" v-if="message.title">
                                    {{ message.title }}
                                </view>
                                <view class="msg-detail">
                                    {{ message.content }}
                                </view>
                            </uni-swipe-action-item>
            	        </view>
            	    </view>
            	</uni-swipe-action>
            </mescroll-body>
        </view>
        <loading-view v-if="loading"></loading-view>
	</view>
</template>

<script>
    import * as API_Message from '@/api/message.js'
    import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"
	export default {
        mixins: [MescrollMixin],
		data() {
			return {
				tabsList: [
                    { name: '未读消息' },
                    { name: '全部消息' }
                ],
                current: 0,
                params: {
                    page_no: 1,
                    page_size: 10
                },
                messageList: [], //消息列表
                options: [
                    {
                        text: '删除',
                        style: {
                            backgroundColor: '#ff5000'
                        }
                    }
                ],
                down: {
                    auto: false //是否在初始化完毕之后自动执行一次下拉刷新的回调
                },
                loading: true
			}
		},
		methods: {
            changeTabs(index) {
                this.current = index
                this.messageList = []
                this.params.page_no = 1
                this.mescroll.resetUpScroll(true)
            },
            //下拉刷新
            downCallback() {
                this.changeTabs(this.current)
            },
            //上拉加载
            upCallback(page) {
                this.params.page_no = page.num
                this.getMessages()
            },
            //左滑删除事件
            handleMessage(index) {
                let that = this
                const id = this.messageList[index].id
                uni.showModal({
                    title: '提示',
                    content: '确定要删除这条消息吗？',
                    confirmColor: '#ff5000',
                    success(res) {
                        if(res.confirm) {
                            API_Message.deleteMessage(id).then(() => {
                                uni.showToast({ title: '删除成功' })
                                that.downCallback()
                            })
                        }
                    }
                })
            },
            //获取站内消息列表
            getMessages() {
                const params = JSON.parse(JSON.stringify(this.params))
                if (this.current !== 1) {
                  params.read = 0
                } else {
                  delete params.read
                }
                API_Message.getMessages(params).then(async response => {
                    const { data } = response
                    if (data && data.length) {
                        if (params.read === 0) {
                            const ids = data.map(item => item.id).join(',')
                            await API_Message.messageMarkAsRead(ids)
                        }
                        this.messageList.push(...data)
                    }
                    this.loading = false
                    this.mescroll.endBySize(data.length, response.data_total);
                })
            }
		}
	}
</script>

<style lang="scss" scoped>
    .website-message {
        /deep/.mescroll-body {
            min-height: 1166rpx;
        }
        .message-list {
            margin: 0 20rpx 20rpx 20rpx;
            .msg-date {
                font-size: 20rpx;
                padding: 30rpx 0 20rpx 0;
                text-align: center;
                color: #848689;
                // background-color: #F7F7F7;
            }
            .msg-content {
                background-color: #FFFFFF;
                border-radius: 20rpx;
                overflow: hidden;
                .msg-title {
                    padding: 20rpx 20rpx 0 20rpx;
                    font-size: 30rpx;
                    font-weight: 700;
                    color: #343434;
                }
                .msg-detail {
                    padding: 30rpx 20rpx;
                }
            }
        }
    }
</style>
